<template>
	<view class="container">
		<view class="header">
			<text class="title">设备信息增强插件</text>
			<text class="subtitle">DeviceInfoPlus Demo</text>
		</view>
		
		<view class="content">
			<!-- 基础设备信息 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">基础设备信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item" v-for="(value, key) in deviceInfo" :key="key">
						<text class="info-label">{{formatLabel(key)}}</text>
						<text class="info-value">{{value}}</text>
					</view>
				</view>
			</view>
			
			<!-- 网络状态 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">网络状态</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">网络类型</text>
						<text class="info-value">{{networkInfo.networkType}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">连接状态</text>
						<text class="info-value" :class="{'connected': networkInfo.isConnected}">
							{{networkInfo.isConnected ? '已连接' : '未连接'}}
						</text>
					</view>
				</view>
			</view>
			
			<!-- 电池信息 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">电池信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">电量</text>
						<text class="info-value">{{batteryInfo.level}}%</text>
					</view>
					<view class="info-item">
						<text class="info-label">充电状态</text>
						<text class="info-value" :class="{'charging': batteryInfo.isCharging}">
							{{batteryInfo.isCharging ? '充电中' : '未充电'}}
						</text>
					</view>
				</view>
			</view>
			
			<!-- 传感器数据 -->
			<view class="section" v-if="sensorData">
				<view class="section-header">
					<text class="section-title">传感器数据</text>
				</view>
				<view class="sensor-grid">
					<!-- 加速度传感器 -->
					<view class="sensor-item" v-if="sensorData.accelerometer">
						<text class="sensor-title">加速度传感器</text>
						<view class="sensor-values">
							<text>X: {{sensorData.accelerometer.x}}</text>
							<text>Y: {{sensorData.accelerometer.y}}</text>
							<text>Z: {{sensorData.accelerometer.z}}</text>
						</view>
					</view>
					
					<!-- 陀螺仪 -->
					<view class="sensor-item" v-if="sensorData.gyroscope">
						<text class="sensor-title">陀螺仪</text>
						<view class="sensor-values">
							<text>X: {{sensorData.gyroscope.x}}</text>
							<text>Y: {{sensorData.gyroscope.y}}</text>
							<text>Z: {{sensorData.gyroscope.z}}</text>
						</view>
					</view>
					
					<!-- 指南针 -->
					<view class="sensor-item" v-if="sensorData.compass">
						<text class="sensor-title">指南针</text>
						<view class="sensor-values">
							<text>方向: {{sensorData.compass.heading}}°</text>
							<text>精度: {{sensorData.compass.accuracy}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 其他信息 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">其他信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">设备ID</text>
						<text class="info-value">{{deviceId}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">运行环境</text>
						<text class="info-value">{{isEmulator ? '模拟器' : '真机'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import DeviceInfoPlus from '@/plugins/device-info-plus/index.js';

// 设备信息数据
const deviceInfo = ref({});
const networkInfo = ref({ networkType: 'unknown', isConnected: false });
const batteryInfo = ref({ level: -1, isCharging: false });
const sensorData = ref(null);
const isEmulator = ref(false);
const deviceId = ref('');

// 初始化设备信息
const initDeviceInfo = async () => {
	try {
		await DeviceInfoPlus.init();
		const info = DeviceInfoPlus.getAllInfo();
		deviceInfo.value = info.deviceInfo;
		networkInfo.value = info.networkInfo;
		batteryInfo.value = info.batteryInfo;
		sensorData.value = info.sensorData;
		isEmulator.value = info.isEmulator;
		deviceId.value = info.deviceId;
		
		// 监听网络状态变化
		DeviceInfoPlus.onNetworkChange((info) => {
			networkInfo.value = info;
		});
		
		// 监听电池状态变化
		DeviceInfoPlus.onBatteryChange((info) => {
			batteryInfo.value = info;
		});
	} catch (error) {
		console.error('初始化设备信息失败:', error);
		uni.showToast({
			title: '初始化失败',
			icon: 'none'
		});
	}
};

// 格式化标签
const formatLabel = (key) => {
	const labelMap = {
		brand: '品牌',
		model: '型号',
		system: '系统',
		platform: '平台',
		screenWidth: '屏幕宽度',
		screenHeight: '屏幕高度',
		windowWidth: '窗口宽度',
		windowHeight: '窗口高度',
		statusBarHeight: '状态栏高度',
		pixelRatio: '像素比',
		language: '语言',
		version: '版本',
		SDKVersion: 'SDK版本',
		memory: '内存',
		storage: '存储'
	};
	return labelMap[key] || key;
};

onMounted(() => {
	initDeviceInfo();
});

onUnmounted(() => {
	DeviceInfoPlus.destroy();
});
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	padding: 30rpx;
	background-color: #f7f7f7;
}

.header {
	padding: 30rpx 0;
	text-align: center;
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
}

.section {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	
	.section-header {
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			position: relative;
			padding-left: 24rpx;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 28rpx;
				background: #3B82F6;
				border-radius: 3rpx;
			}
		}
	}
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
	gap: 20rpx;
	
	.info-item {
		background: #f8f9fa;
		padding: 20rpx;
		border-radius: 12rpx;
		
		.info-label {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 8rpx;
			display: block;
		}
		
		.info-value {
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
			
			&.connected {
				color: #10B981;
			}
			
			&.charging {
				color: #F59E0B;
			}
		}
	}
}

.sensor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
	gap: 20rpx;
	
	.sensor-item {
		background: #f8f9fa;
		padding: 20rpx;
		border-radius: 12rpx;
		
		.sensor-title {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 12rpx;
			display: block;
		}
		
		.sensor-values {
			display: flex;
			flex-direction: column;
			gap: 8rpx;
			
			text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}
}
</style> 